<template>
  <div>
    <el-row gutter="20">
          <el-col span="24">
            <!--首页走马灯开始-->
            <el-carousel height="300px" >

              <el-carousel-item >
                <img src="../../assets/index/index_img02(0.25).png" width="1200px" height="100%">
              </el-carousel-item>

              <el-carousel-item >
                <img src="../../assets/index/index_img01(0.25).png" width="1200px" height="100%">
              </el-carousel-item>

              <el-carousel-item >
                <img src="../../assets/index/index_img03(0.25).png" width="1200px" height="100%">
              </el-carousel-item>

            </el-carousel>
            <!--走马灯结束-->
          </el-col>
        </el-row>
        <!--第二行开始-->
        <el-row gutter="20">
          <el-col style="margin: 10px 0" span="6">
            <!--小窗口图片开始-->
            <el-carousel height="200px" direction="vertical" :autoplay="false">
              <el-carousel-item >
                <img src="../../assets/index/index_img_little01(1.0).png" width="100%" alt="">
              </el-carousel-item>
              <el-carousel-item >
                <img src="../../assets/index/index_img_little02(1.0).png" width="100%" alt="">
              </el-carousel-item>
              <el-carousel-item >
                <img src="../../assets/index/index_img_little03(1.0).png" width="100%" alt="">
              </el-carousel-item>
            </el-carousel>
            <!--小窗口图片结束-->
          </el-col>

          <el-col style="margin: 10px 0" span="12">
            <!--中心介绍开始-->
            <el-carousel height="200px" direction="vertical" :autoplay="false">
              <el-card class="box-card" style="width:565px; height: 195px; border-radius: 5px; border-color:#E6A23C ">
                <div slot="header" class="clearfix">
                  <i class="el-icon-star-on"></i>
                  <span>"老有所依"智慧敬老院 中心简介</span>
                </div>
                <div  class="text item">
                  <div> "老有所依"智慧敬老院成立于2024年4月，由南京蜗牛有限公司投资兴建和管理，是江苏卫生健康委员会的直属事业单位。</div>
                  <div style="margin-top: 5px">  "老有所依"智慧敬老院牢牢遵循“尊老、敬老、爱老、助老”和“帮天下儿女尽孝，替世上父母解难，为党和政府分忧”的办院宗旨，大胆探索、奋勇创新，正在全力开创医养融合发展的新路子。</div>
                  <div style="margin-top: 10px; color:#E6A23C ;font-size: 13px">  <b>地址：南京市江宁区菲尼克斯路（蜗牛学院旁）。</b></div>


                </div>
              </el-card>
            </el-carousel>
            <!--小窗口图片结束-->
          </el-col>

          <el-col style="margin: 10px 0;" span="6">
            <!--右侧边新闻开始-->
            <div style="height:28px ;margin: 0 auto;line-height: 28px; padding: 0 20px;color:white;background-color: #E6A23C">
              <span style="margin: 0 auto">社会关怀</span>
            </div>
            <el-card  class="box-card" style="width: 100%; margin: 10px 0;height: 158px;border-radius: 5px; border-color:#E6A23C ">
              <div  class="text item">
                <a href="/welcome/content/info" style="color: #E6A23C;">"老有所依"养老院</a>
                <span style="float: right">2022-12-23</span>
              </div>
              <div  class="text item">
                <a href="/welcome/content/medical" style="color: #E6A23C;">我院医务室指南</a>
                <span style="float: right">2022-12-24</span>
              </div>
              <div  class="text item">
                <a href="/welcome/content/food" style="color: #E6A23C;">"老来福"食堂简介</a>
                <span style="float: right">2022-12-25</span>
              </div>
              <div  class="text item">
                <a href="/welcome/content/equipment" style="color: #E6A23C;">我院园区简介!</a>
                <span style="float: right">2022-12-26</span>
              </div>
            </el-card>
            <!--小窗口图片结束-->
          </el-col>
        </el-row>
<!--    第三行开始-->
    <el-row gutter="20">
      <el-col style="margin: 10px 0;" span="6">
        <!--右侧边新闻开始-->
        <div style="height:28px ;margin: 0 auto;line-height: 28px; padding: 0 20px;color:white;background-color: #E6A23C">
          <span style="margin: 0 auto">我们的位置</span>
        </div>
        <el-card  class="box-card" style="width: 100%; margin: 10px 0;height: 350px;border-radius: 5px; border-color:#E6A23C ">
          <el-tag type="warning">地址</el-tag>
          <div style="height:100% ;margin: 0 auto;line-height: 28px; padding: 0 20px;color:white;background-color: #E6A23C">
            <p style="margin: 0 auto ;font-size: 14px;line-height: 20px">南京市江宁区菲尼克斯路：“老有所依”敬老院</p>
          </div>

          <el-tag type="warning">公交</el-tag>
          <div style="height:100% ;margin: 0 auto;line-height: 28px; padding: 0 20px;color:white;background-color: #E6A23C">
            <p style="margin: 0 auto ;font-size: 14px;line-height: 20px">1、12路公交（小龙湾）</p>
            <span></span>
            <p style="margin: 0 auto ;font-size: 14px;line-height: 20px">2、B15快速公交（小龙湾）</p>

          </div>

          <el-tag type="warning">地铁</el-tag>
          <div style="height:100% ;margin: 0 auto;line-height: 28px; padding: 0 20px;color:white;background-color: #E6A23C">
            <p style="margin: 0 auto ;font-size: 14px;line-height: 20px">1、一号线-（小龙湾站）</p>
            <span></span>
           
          </div>

        </el-card>

      </el-col>
      <el-col span="18">
        <div>
          <div id="container" >
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>

<script>
export default {
  data () {
    return {
      map: null,
      marker: ''
    }
  },
  mounted () {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "24031b4c674ff42946d1244f016bfb92",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("container", {  //设置地图容器id
          viewMode: "3D",    //是否为3D地图模式
          zoom: 18,           //初始化地图级别
          center: [114.3798,
            30.5066], //初始化地图中心点位置
        });
        var marker = new AMap.Marker({
          position: new AMap.LngLat(114.3798,
              30.5066), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          content: `
                                    <div class="my_marker">
                                          <div class="showLog" style="width: 150px">
                                               <h3>"老有所依"养老院</h3>

                                          </div>
                                          <div class="marker">

                                                <div class="title">
                                                    <img src="https://img.vinua.cn/images/jkGv.png" alt="">
                                                </div>
                                          </div>

                                    </div>`,

          //添加 Icon 图标 URL
          offset: new AMap.Pixel(-15, -20),

        });
        var circle = new AMap.Circle({
        		center: new AMap.LngLat("113.934497", "22.540517"), // 圆心位置
        		radius: 10, //半径
        		strokeColor: "#1aec1a", //线颜色
        		strokeOpacity: 1, //线透明度
        		strokeWeight: 1, //线粗细度
        		fillColor: "#1aec1a", //填充颜色
        		fillOpacity: 0.35 //填充透明度
        	});
        // 将创建的点标记添加到已有的地图实例：
        this.map.add([marker]);
      }).catch(e => {
        console.log(e);
      })
    },
  }
}


</script>
<style  scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
}
</style>